/**
 * Copyright 2016 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

canvas#three {
	opacity : 0;

	&.visible {
		opacity: 1;
	}
}

#videoContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s;

	&.visible {
		opacity: 1;
	}

	video {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 0;
		transform: translate(-50%, -50%) scale(0.01);

		&.tall {
			height: auto;
			width: 100%;
		}

		&.wide {
			height: 100%;
			width: auto;
		}

		&.active {
			transform: translate(-50%, -50%) scale(1);
		}
	}

}

$maxBounce : 0.3;

@keyframes bounceAnimation {
	0% {
		transform: scale(calc($maxBounce * 0 + 1));
	}
	10% {
		transform: scale(calc($maxBounce * 0.3 + 1));
	}
	20% {
		transform: scale(calc($maxBounce * 0.58 + 1));
	}
	30% {
		transform: scale(calc($maxBounce * 0.8 + 1));
	}
	40% {
		transform: scale(calc($maxBounce * 0.95 + 1));
	}
	50% {
		transform: scale(calc($maxBounce * 1 + 1));
	}
	60% {
		transform: scale(calc($maxBounce * 0.95 + 1));
	}
	70% {
		transform: scale(calc($maxBounce * 0.8 + 1));
	}
	80% {
		transform: scale(calc($maxBounce * 0.58 + 1));
	}
	90% {
		transform: scale(calc($maxBounce * 0.3 + 1));
	}
	100% {
		transform: scale(calc($maxBounce * 0 + 1));

	}
}

#image {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: blue;
	pointer-events: none;
	opacity: 0;

	&.bounce {
		animation: bounceAnimation 0.46875s infinite;
	}

	&.visible {
		opacity: 1;
	}
}